<template>
    <div class="mb-4">
        <ul class="flex items-center">
            <li v-for="item in tabs" :key="item.id" class="mr-8 px-5 py-2 cursor-pointer" @click="ch(item.id)"
                :class="{ 'highbgcolor': modelValue == item.id }">
                {{ item.name }}
            </li>
        </ul>
    </div>
    <component :is="curCom" :data="data"></component>
</template>
<style scoped>
li {
    background-color: #E0E0E0;
}

li:hover {
    font-weight: bold;
}
</style>
<script setup>
const props = defineProps({
    data: {
        type: Object,
    },
    tabs: {
        type: Array,
        default: () => [
            {
                id: "baseInfo",
                name: '基本信息',
                component: {
                    render() {
                        return h('div', '基本信息')
                    }
                }
            }
        ]
    },
    modelValue: {
        type: String,
        default: ''
    }
})
const ch = (id) => {
    emit('update:modelValue', id)
}
const emit = defineEmits(['update:modelValue'])

const curCom = computed(() => {
    return props.tabs.find(item => item.id == props.modelValue)?.comp
})

</script>